<template>
  <div class="goods">
    <div class="goods-list-wrapper">
      <div class="goods-list" :class="config.goods_nav_type">
        <div
          class="tabs-wrap"
          v-if="config.goods_show_type === 'goodsGroup'"
          :class="'tabs_' + config.goods_nav_type"
        >
          <div
            class="tabs-item"
            v-for="(item, index) in config.goods_list"
            :key="index"
            :class="{
              active: groupId === index,
              style1: config.goods_nav_mode === 1 && config.goods_nav_type!=='left',
              style2: config.goods_nav_mode === 2 && config.goods_nav_type!=='left',
              style3: config.goods_nav_mode === 3 && config.goods_nav_type!=='left'
            }"
            @click="groupId = index"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="goods-layout" :class="config.goods_nav_type">
          <ul
            class="goods-layout__container card"
            :class="{
              big: config.goods_list_style === 0,
              small: config.goods_list_style === 1,
              three: config.goods_list_style === 2,
              list: config.goods_list_style === 3,
              hybrid: config.goods_list_style === 4,
              swipe: config.goods_list_style === 5
            }"
            :style="{
              padding: '0 ' + config.page_margin + 'px'
            }"
          >
            <li
              class="cap-goods-layout__wrapper"
              v-for="(item, index) in config.goods"
              :key="index"
            >
              <a
                class="cap-goods-layout__item"
                :class="{
                  card: config.goods_border_style === 0,
                  'card-shadow': config.goods_border_style === 1,
                  card2: config.goods_border_style === 2,
                  simple: config.goods_border_style === 3,
                  circle: config.display_scale
                }"
                :style="{
                  margin:
                    !config.goods_list_style || config.goods_list_style === 3
                      ? config.goods_margin + 'px 0'
                      : config.goods_list_style === 5
                      ? '0 ' + config.goods_margin + 'px'
                      : config.goods_margin + 'px'
                }"
              >
                <div class="cap-goods__photo">
                  <div
                    class="cap-goods__image-wrap"
                    :style="{
                      paddingTop: !config.image_scale
                        ? '100%'
                        : config.image_scale === 1
                        ? '66.6667%'
                        : config.image_scale === 2
                        ? '133.333%'
                        : ' 56.25%'
                    }"
                  >
                    <div
                      class="cap-goods__img cap-goods__img--cover"
                      :style="{
                        backgroundImage: 'url(' + item.pictureUrl + ')',
                        backgroundSize: config.image_fill_style
                          ? 'contain'
                          : 'cover'
                      }"
                    ></div>
                    <span
                      v-show="config.show_corner_mark"
                      class="cap-goods-layout__corner-mark"
                      >新品</span
                    >
                  </div>
                </div>
                <div class="cap-goods-layout__info">
                  <div class="cap-goods-layout__info-title">
                    <h3
                      v-show="config.show_title"
                      class="title"
                      :style="{ fontWeight: config.text_weight }"
                    >
                      {{ item.productName }}
                    </h3>
                    <p class="sub-title" v-show="config.show_sub_title">
                      {{ item.productDescribe }}
                    </p>
                  </div>
                  <div class="cap-goods-layout__info-price">
                    <div
                      class="price-info"
                      style="font-weight: normal; padding-right: 29px;"
                    >
                      <span class="sale-price">
                        <div
                          v-show="config.show_origin_price"
                          class="cap-theme-view"
                          style="color: rgb(255, 68, 68);"
                        >
                          <span class="price-tag">¥</span>
                          <span class="price-sale-price">{{
                            item.salePrice
                          }}</span>
                        </div>
                        <div
                          v-show="config.show_buy_btn"
                          class="cap-goods-layout__buy-btn-wrapper big type-1"
                        >
                          <i
                            class="el-icon-shopping-cart-2"
                            style="color: rgb(255, 68, 68);"
                          ></i>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lazyimg from '../assets/img/dimg.png'

export default {
  props: ['value'],
  data() {
    return {
      lazyimg,
      config: this.value ? this.value : {},
      rules: {
        title: [{ required: true, message: '请输入页面名称', trigger: 'blur' }]
      },
      defaultGoods: [
        {
          isTest: true,
          number: '',
          pictureUrl:
            'https://img.yzcdn.cn/upload_files/2018/01/22/FnlHRufXMtUI_AbAEP0tux_nDL1T.png',
          origin: '',
          salePrice: '1.00',
          productDescribe: '这里显示商品名称，最多显示1行',
          productName: '这里显示商品名称，最多显示1行'
        },
        {
          isTest: true,
          number: '',
          pictureUrl:
            'https://img.yzcdn.cn/upload_files/2018/01/22/FnlHRufXMtUI_AbAEP0tux_nDL1T.png',
          origin: '',
          salePrice: '1.00',
          productDescribe: '这里显示商品名称，最多显示1行',
          productName: '这里显示商品名称，最多显示1行'
        }
      ],
      groupId: 0
    }
  },
  created() {
    this.setDefault()
  },
  updated() {
    this.setDefault()
  },
  watch: {
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    },
    value(newVal) {
      this.config = newVal;
    },
  },
  methods: {
    setDefault() {
      if (this.config.goods.length == 0) {
        this.config.goods = this.defaultGoods
      }
    }
  }
}
</script>

<style lang="less">
.goods {
  width: 100%;
  overflow: hidden;
  .goods-list {
    height: 100%;
    position: relative;
    .tabs-wrap {
      display: flex;
      height: 100%;
      align-items: center;
      .tabs-item {
        flex-grow: 1;
        line-height: 40px;
        text-align: center;
        box-sizing: border-box;
        &.active {
          &.style1 {
            color: #f44;
            border-bottom: 3px solid #f44;
          }
          &.style2 {
            color: #fff;
            height: 25px;
            line-height: 25px;
            margin: 8px 0;
            background: #f44;
            border-radius: 20px;
          }
          &.style3 {
            position: relative;
            background-color: #f44;
             color: #fff;
            &::before {
              z-index: 10;
              content: '';
              position: absolute;
              bottom: -2px;
              left: 50%;
              margin-left: -6px;
              overflow: hidden;
              border-color: transparent transparent #f44 #f44;
              border-style: solid;
              border-width: 6px;
              transform: rotate(-45deg);
            }
          }
        }
      }
    }
    &.left {
      .tabs-wrap {
        width: 80px;
        position: absolute;
        top: 0;
        bottom: 0;
        flex-direction: column;
        .tabs-item {
          flex-grow: 0;
          width: 100%;
          line-height: 20px;
          margin-bottom: 8px;
          padding: 10px 8px;
          text-align: left;
          &.active {
            border-right: 3px solid #f44;
            border-bottom: none;
          }
        }
      }
    }
  }
  .goods-layout {
    &.left {
      padding-left: 80px;
    }
  }
  .tabs-wrap {
    background: white;
    .el-tabs__header {
      margin: 0;
    }
  }
  .cap-goods-layout__item {
    position: relative;
    display: block;
    box-sizing: border-box;
    min-height: 50px;
    overflow: hidden;
    color: #333;
    background-color: #fff;
  }
  .card-shadow {
    box-shadow: 0 2px 8px rgba(93, 113, 127, 0.08);
  }
  .card2 {
    border: 1px solid rgba(50, 50, 51, 0.1);
  }
  .simple {
    background-color: inherit;
  }
  .circle {
    border-radius: 8px;
  }
  .cap-goods__image-wrap {
    position: relative;
    max-height: 500px;
    overflow: hidden;
    // padding-top: 100%;
  }
  .cap-goods__img--cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
  }
  .cap-goods-layout__info {
    position: relative;
    padding: 0 10px;
    .cap-goods-layout__info-title {
      margin: 10px 0 0;
      .title {
        max-height: 20px;
        margin-bottom: 5px;
        font-size: 14px;
        line-height: 20px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sub-title {
        height: 16px;
        color: #999;
        font-size: 12px;
        line-height: 16px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .cap-goods-layout__info-price {
    position: relative;
    width: 100%;
    .price-info {
      height: 44px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
    }
    .cap-goods-layout__buy-btn-wrapper {
      position: absolute;
      top: 10px;
      right: 0;
      font-size: 20px;
    }
  }
  .cap-goods-layout__wrapper {
    overflow: hidden;
  }
  // 一行两个
  .small {
    .cap-goods-layout__wrapper {
      float: left;
      width: 50%;
    }
  }
  // 一行三个
  .three {
    .cap-goods-layout__wrapper {
      float: left;
      width: 33.33%;
    }
  }
  // 详细列表
  .list {
    .cap-goods__photo {
      float: left;
      width: 145px;
      height: 145px;
      min-height: auto;
      margin-right: 10px;
    }
    .cap-goods-layout__info-price {
      position: absolute;
      bottom: 0;
      left: 5px;
      right: 5px;
      margin: 0;
      width: auto;
    }
    .cap-goods-layout__info {
      height: 145px;
      margin-left: 155px;
      padding: 0 10px 0 0;
      overflow: hidden;
    }
  }
  .hybrid {
    .cap-goods-layout__wrapper:nth-child(3n + 1) {
      float: left;
      width: 100%;
    }
    .cap-goods-layout__wrapper:nth-child(3n + 2),
    .cap-goods-layout__wrapper:nth-child(3n) {
      float: left;
      width: 50%;
    }
  }
  .swipe {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: -10px;
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    .cap-goods-layout__wrapper {
      flex: 0 0 30%;
      float: none;
      width: 30%;
    }
  }
  .cap-goods-layout__corner-mark {
    position: absolute;
    top: 12px;
    z-index: 5;
    background-color: #f44;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    width: 40px;
    text-align: center;
    border-radius: 0 10px 10px 0;
  }
}
</style>
